<template>
  <div id="app" class="app" ref="app">
    <!-- 头 -->
    <NavBar v-show="!$route.meta.hideNavBar"></NavBar>
    <UserNavBar v-show="$route.meta.showUserNavBar"></UserNavBar>
    <transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutLeft">
      <router-view></router-view>
    </transition>
 
    <!-- 脚 -->
    <BottomBar v-show="!$route.meta.hideBottomBar"></BottomBar>

  </div>
</template>

<script>
import NavBar from './components/NavBar';
import BottomBar from './components/BottomBar';
import UserNavBar from './components/UserNavBar';


export default {
  components:{
    NavBar,
    BottomBar,
    UserNavBar
  },
  mounted(){
    // 判断是否为移动设备，如果不是 设置最大宽度
    if (
        !/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
            navigator.userAgent
        )
    ) {
        this.$refs.app.style.maxWidth = "10rem";
    }
  }
}
</script>



<style lang="less">
*{
  padding: 0px;
  margin: 0px;
  color: @gray;
}
body{
  background-color: #333333;
  overflow: hidden;
}
</style>

<style lang="less" scoped>
.app{
  background-color: @white;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  overflow: hidden;
}
</style>

